<template>
    <div class="goodscontant">
        <ul class="goodslist">
            <router-link class="goodsitem" v-for="(item,i) in goodlist" :to="'/home/goodsinfo/'+item.id" tag="li"
                         :key="item.id">
                <img :src="item.img_url"
                     alt="">
                <h1>{{item.title}}</h1>
                <div class="goodsitem-tro">
                    <div class="goods-price">
                        ￥{{item.sell_price}}
                        <del class="goodsdel">￥{{item.market_price}}</del>
                    </div>
                    <div class="goods-gender">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </div>
                </div>
            </router-link>
            <mt-button type="danger" size="large" @click="getmore">加载更多</mt-button>

        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageindex: 1,
                goodlist: []
            }
        },
        methods: {
            getGoodslist() {
                this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(res => {
                    if (res.body.status == 0) {
                        this.goodlist.push(...res.body.message)
                    }
                })
            },
            getmore() {
                this.pageindex++
                this.getGoodslist()
            }
        },
        created() {
            this.getGoodslist()
        }
    }
</script>

<style scoped lang="scss">
    .goodscontant {
        .goodslist {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
            box-sizing: border-box;
            .goodsitem {
                width: 48%;
                display: flex;
                flex-direction: column;
                background-color: #F7F7F7;
                box-shadow: 0 0 6px 2px #ccc;
                min-height: 100px;
                padding: 10px;
                box-sizing: border-box;
                margin-bottom: 13px;

                img {
                    width: 100%;
                    min-height: 170px;
                }

                h1 {
                    font-size: 15px;
                    width: 100%;
                    height: 30px;
                    white-space: initial;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    line-height: 15.5px;
                }

                .goodsitem-tro {
                    padding: 0px 5px;
                    box-sizing: border-box;
                    color: #8D908F;

                    .goods-price {
                        color: red;
                        font-size: 14px;

                        .goodsdel {
                            font-size: 12px;
                            color: #8D908F;
                            margin-left: 5px;
                        }
                    }

                    .goods-gender {
                        display: flex;
                        justify-content: space-between;
                        font-size: 14px;
                    }

                }
            }
        }
    }
</style>